<template>
    <div id="manageBlog" >

        <div style="padding:10px 0" >
            <el-breadcrumb separator="/">
                <el-breadcrumb-item :to="{ path: '/manageBlog' }"> 文章管理</el-breadcrumb-item>
                <el-breadcrumb-item>博客列表</el-breadcrumb-item>
            </el-breadcrumb>
         </div>
        
        <div style="text-align:left">
            <ul   class="infinite-list">
                <li v-for="item in myArticleList"  style="list-style:none;"  class="infinite-list-item">
                    <el-row>
                        <el-col :span="24" style="display:inline-block;">
                            <div class="grid-content bg-purple;display:inline-block;">
                                <span class="titleFlag" v-if="item.concern">{{item.concern}}</span>

                                <router-link :to="'/myBlogDetail/'+item.id" style="text-decoration: none;color:black">
                                    {{item.title}}
                                </router-link>

                            </div>
                        </el-col>
                    </el-row>
                    <el-row style="margin-top:10px">
                        <el-col :span="24">
                            <div align="left" style="float:left">
                                <span  style="font-size:12px" v-if="item.original ==1">原创</span> 
                                <span  style="font-size:12px" v-else-if="item.original ==0">转载</span>  &nbsp;&nbsp;
                                <span  style="font-size:12px">{{item.update_date}}</span>
                            </div>
                            <div align="right">
                                <router-link :to="'/myBlogDetail/'+item.id" style="text-decoration: none;color:black">
                                    <span style="font-size:12px;color:#349EDF;margin-left:20px">查看</span>
                                </router-link>
                                
                                <span style="font-size:12px;color:#349EDF;margin-left:20px;cursor:pointer" @click="cancleTop(item.id)" v-if="item.concern == '置顶'">取消置顶</span>
                                <span style="font-size:12px;color:#349EDF;margin-left:20px;cursor:pointer" @click="toTop(item.id)" v-if="item.concern != '置顶'">置顶</span>
                                <span style="font-size:12px;color:red;cursor:pointer;margin-left:20px" @click="deleteArticle(item.id)">删除</span>  <!-- 删除操作，这边没有做二次校验 -->
                            </div>
                        </el-col>
                    </el-row>

                    <hr style="background-color:#D6D6C4">
                </li>
            </ul>
           
        </div>


    </div>
</template>

<script>
export default {
    data(){
        return{
            'myArticleList':[],
            'currentPage':1,
            'pageSize':10,
            'myArticleTotal':0
        }
    },
    methods:{
        //取消置顶
        cancleTop(id){
            var data = {
                id:id,
            };
            this.axios.post('/article/cancleTop',data).then(response=> {
                if(response.data.code == 500){
                    alert(response.data.message);
                }else{
                    this. getBlogList();
                }
            }).catch(error => {
               this.$message({
                    type: 'warning ',
                    message: '异常'+error
                }); 
            });
        },
        //置顶
        toTop(id){
            var data = {id};
            this.axios.post('/article/toTop',data).then(response=> {
                if(response.data.code == 500){
                    alert(response.data.message);
                }else{
                    this. getBlogList();
                }
            }).catch(error => {
               this.$message({
                    type: 'warning ',
                    message: '异常'+error
                }); 
            });
        },

        //删除博客
        deleteArticle(id){
            var data = {
                id
            };
            this.axios.post('/article/deleteArticle',data).then(response=> {
                if(response.data.code == 500){
                    alert(response.data.message);
                }else{
                    this. getBlogList();
                }
            }).catch(error => {
               this.$message({
                    type: 'warning ',
                    message: '异常'+error
                }); 
            });
             
        },
        //加载 博客列表
        getBlogList(currentPage,pageSize){
            var data = {};
            this.axios.post('/article/getMyArticleList',data).then(response=> {
                if(response.data.code == 500){
                    alert(response.data.message);
                }else{

                    this.myArticleList = response.data.data.myArticleList;
                    this.myArticleTotal = response.data.data.myArticleTotal;
                }
            }).catch(error => {
               this.$message({
                    type: 'warning ',
                    message: '异常'+error
                }); 
            });
        }
    },
    mounted(){
        this. getBlogList();  //下拉分页暂时没做，整页加载
    }
}
</script>

<style scoped>
.titleFlag{
    border:1px solid #FFFFFF;
    border-radius:3px;
    padding:3px
}
</style>